<template>
	<div>
		<van-nav-bar
		  title=""
		  left-text="返回"
		  left-arrow
		  @click-left="onClickLeft"
		/>
	</div>
	<div>
		<van-row>
		<van-col span="2"></van-col>
		<van-col span="20">
			<div>
				<H1>密码找回</H1>
				<van-cell-group inset>
				  <van-field
				    v-model="user.phone"
            center
            clearable
				    label="手机号"
				    placeholder="请输入手机号"
            @change="checkPhone()"
					:rules="[{ requird:true,message:'请输入手机号'}]"
				  />
				</van-cell-group>
				<van-cell-group inset>
				  <van-field
				    v-model="user.code"
				    center
				    clearable
				    label="短信验证码"
				    placeholder="请输入短信验证码"
				  >
            <template #button>
              <van-button size="small" type="primary" :disabled="btnflag" @click="sendCode()">{{btnmsg}}</van-button>
            </template>
				  </van-field>
				</van-cell-group>
				<van-cell-group inset>
				  <van-field
				    v-model="user.password"
				    type="password"
				    label="密码"
				    placeholder="请输入密码"
					:rules="[{ requires: true,message:'请输入密码'}]"
				  />
				  <van-field
				    v-model="password2"
				    type="password"
				    label="确认密码"
				    placeholder="再次输入密码"
            :rules="[{ required: true, message: '请输入确认密码' }]"
            @change="checkPass()"
          />
				</van-cell-group>
				<div style="margin: 16px;">
				  <van-button @click="findpass()" round block type="primary" >
				    找回密码
				  </van-button>
				</div>
			</div>
		</van-col>
		<van-col span="2"></van-col>
		</van-row>
	</div>
</template>

<script>
export default{
	setup() {
	  const onClickLeft = () => history.back();
    // 校验函数返回 true 表示校验通过，false 表示不通过
    const validator = (val) => /1[3-9]{1}\d{9}/.test(val);
	  return {
	    onClickLeft,
      validator,
	  };
	},
	data(){
		return{
			user:{},
      btnmsg:"发送验证码",
      btntime:60,
      btnflag:true,
			password2:""
		}
	},methods:{
    checkPhone(){//校验手机号是否存在，存在才可以找回
      this.axios.get("/api/user/checkphone.do?phone="+this.user.phone).then((res)=>{
        if(res.data.code==200){
          //手机号，不存在，不可以找回密码
          this.$toast.fail("亲，手机号还不是账号，可以先注册哟！");
        }else{
          this.btnflag=false;
        }
      })
    },
		//发送验证码
		sendCode(){
      this.btnmsg="重新发送("+this.btntime+"s)";
      this.btnflag=true;
			this.axios.post("/api/sms/sendFindPasswordCode.do?phone="+this.user.phone).then((res)=>{
				if(res.data.code==200){
					this.$toast.success('验证码发送成功，请注意查收');
          //重复执行，每秒一次
          var r=setInterval(()=>{
            if(this.btntime>0){
              this.btntime--;
              this.btnmsg="重新发送("+this.btntime+"s)";
            }else{
              //结束定时任务
              clearInterval(r);
              this.btnmsg="重新发送";
              this.btnflag=false;
              this.btntime=60;
            }
          },1000);
				}else{
					this.$toast.fail('网络异常');
				}
			});
		},
    checkPass(){//校验2次密码是否一致
      if(this.user.password===this.password2){
        //校验成功
        this.$toast.success('2次密码输入一致');
      }else{
        //校验失败
        this.$toast.fail("两次密码输入不一致");

      }
    },
    findpass(){//请求接口，实现密码找回
      //注册账号,成功自动登陆
      this.axios.post("/api/user/findpass.do",this.user).then((res)=>{
        if(res.data.code==200){
          //密码找回成功,跳转登陆页面
          this.$router.push("/");
        }else{
          this.$toast.fail(res.data.msg);
        }
      })
    }
	}
}	
	
</script>

<style>
</style>
